<template>
    <div class="bgf padd20">
        <el-form :model="form" label-width="100px" >
            <el-form-item label="公司logo：">
                <div class="">
                    <el-upload
                        :headers="{ token: $store.state.token }"
                        :action = globalUrl 
                        :on-success="(val)=>uploadSuccess(val,'logo')"
                        class="avatar-uploader"
                        name="files"
                        :show-file-list="false"
                    >
                        <img v-if="form.logo" :src="form.logo" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="col9e lh34  font12 ">
                        尺寸：110*110 像素
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="公司名称：">
                <el-input v-model="form.companyName" placeholder="请输入公司名称" class="w380" />  
            </el-form-item>
            <el-form-item label="电话：">
                <el-input v-model="form.moblie" placeholder="请输入电话" class="w380" /> 
            </el-form-item>
            <el-form-item label="邮箱：">
                <el-input v-model="form.email" placeholder="请输入邮箱" class="w380" /> 
            </el-form-item>
            <el-form-item label="微信：">
                <el-input v-model="form.wechat" placeholder="请输入微信" class="w380" /> 
            </el-form-item>
            <el-form-item label="介绍：">
                <el-input v-model="form.introduce" placeholder="请输入介绍" class="w380" :autosize="{ minRows: 4, }" type="textarea"/> 
            </el-form-item>
            
            <el-form-item label=" ">
                 <el-button @click="submit" type="primary">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return{
            globalUrl: '/api/system/upload/uploadList',
            form:{},
        }
    },
    mounted(){
        this.getData()
    },
    methods:{

        submit(){
            let that = this;
            // console.log(that.form,'that.form')
            that.$api.updateAboutUs(that.form).then(res=>{
                console.log(res)
                if(res){
                    that.$message.success(res.message)
                }
            })
        },

        //图片上传成功
        uploadSuccess(val,key){
            console.log(val,key)
            if(val.status==200){
                let obj = this.utils.Decrypt(val.data);
                // console.log(obj)
                this.form.logo = obj.path;
            }
        },

        getData(){
            let that = this;
            that.$api.aboutUs().then(res=>{
                console.log(res)
                if(res){
                    that.form = res;
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.el-icon.avatar-uploader-icon {
    width: 80px;
    height: 80px;
}
</style>